{% extends "_layouts/examples.html" %}
{% block title %}Hero / Nested grid{% endblock %}
{% block standalone_css %}patterns_all{% endblock %}

{% set is_paper = True %}
{% block content %}

<section class="p-section--hero">
    <div class="row--25-75-on-large">
        <div class="col">
            <div class="p-section--shallow">
                <div class="p-media-container">
                    <img src="https://assets.ubuntu.com/v1/b1f04506-Kubeflow-Logo-RGB.svg" alt="Kubeflow" width="200" />
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row">
                <div class="col-6">
                    <div class="p-section--shallow">
                        <h1>What is Kubeflow?</h1>
                        <p class="p-heading--2">Kubeflow is the open source machine learning MLOps platform</p>
                    </div>
                </div>
                <div class="col-3">
                    <p>Kubeflow enables you to develop and deploy machine learning models at any scale. It is a cloud-native application that runs on any cloud.</p>
                    <p>Charmed Kubeflow is Canonical’s distribution. It is secure and seamlessly integrated with other leading tools such as MLflow.</p>
                </div>
                <div class="col-9">
                    <hr class="p-rule--muted" />
                    <div class="p-media-container">
                        <!-- p-media-container is used to provide a spacing between the rule and the button -->
                        <a class="p-button--positive" href="#">Try out Charmed Kubeflow</a> <a class="p-button" href="#">Read our MLOps toolkit</a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

{% endblock %}
